<meta charset="UTF-8">
<title>MsgBox</title>

<div class="msgbox">
	<h1>确认</h1>
	<div class="topCloseBtn closeAction">×</div>
	<div class="inner">
		益力多，你今日饮左未？
	</div>
	<div class="btn">
 		<div class="closeAction">确认</div>
	</div>
</div>


<style>
	.msgbox {
		position: fixed;
		background-color: #ebebeb;
		border: 1px solid #d3d3d3;
		width: 50%;
		min-width: 300px;
		max-width: 400px;
		z-index: 99999999;
		margin: auto;
		min-height: 100px;
	}
	
	.msgbox h1 {
		font-size: .9rem;
		text-align: center;
		padding: 5px 0;
		letter-spacing: 3px;
	}
	
	.msgbox .topCloseBtn {
		position: absolute;
		text-align: center;
		top: 0;
		right: 10px;
		width: 16px;
		line-height: 16px;
		height: 16px;
		background-color: gray;
		color: white;
		cursor: pointer;
	}
	.msgbox .inner {
		margin: 5px;
		margin-top: 0;
		padding: 10px;
		overflow: hidden;
		background-color: #f7f7f7;
		text-align: center;
		border: 1px solid #dadada;
		min-height:50px;
		line-height:50px;
	}
	.msgbox .btn {
		margin: 5px auto;
		width: 70%;
		overflow: hidden;
		text-align: center;
	}
 
	.msgbox .btn > div {
		display: inline-block;
		max-width: 80px;
		cursor: pointer;
		text-align: center;
		border: 1px solid #d3d3d3;
		padding: 3px 10px;
		letter-spacing: 3px;
		box-sizing: border-box;
		background-color: #f7f7f7;
		font-size: .9rem; 
	}
</style>

<script>
function MsgBox(msgbox) {
	// 计算居中
	msgbox.style.left = (window.innerWidth / 2 - msgbox.clientWidth / 2) + 'px';
	msgbox.style.top = (window.innerHeight / 2 - msgbox.clientHeight / 2) + 'px';
	
	// 平均分按钮宽度
	var btn = msgbox.querySelector('.btn'), btns = msgbox.querySelectorAll('.btn>div');
	var j = btns.length, width = btn.clientWidth / j - 12; // 要减去间隙
 
	// 登记关闭事件
	[].forEach.call(msgbox.querySelectorAll('.closeAction'), function(closeBtn){
		closeBtn.onclick = function(){
			msgbox.parentNode.removeChild(msgbox);
		}
	});
}
	
new MsgBox(document.querySelector('.msgbox'));
</script>
